// Description

@import '../../style/themes/default';
@import '../../style/mixins/index';
@import './param';

@mixin description {
  &-header {
    display: flex;
    align-items: center;
  }
  &-title {
    font-weight: 700;
  }
  &-grid {
    display: grid;
    grid-auto-flow: row;
  }
  &-item {
    display: flex;
    align-items: baseline;
    @include flex();
  }
  &-item-label {
  }
  &-item-heading {
    background-color: $--x-background-a100;
  }
  &-bordered {
    .#{$--x-description-prefix} {
      &-item {
        border: $--x-border-base;
        margin-left: -1px;
        margin-top: -1px;
      }
    }
  }
  @include size(big, $--x-padding-big);
  @include size(large, $--x-padding-large);
  @include size(medium, $--x-padding-medium);
  @include size(small, $--x-padding-small);
  @include size(mini, $--x-padding-mini);
}

@mixin size($size, $padding) {
  &-#{$size} {
    .#{$--x-description-prefix} {
      &-header {
        padding: $padding 0;
      }
      &-item {
        padding: calc(#{$padding} / 2) 0;
      }
    }
    &.#{$--x-description-prefix}-bordered {
      .#{$--x-description-prefix}-item {
        padding: $padding;
      }
    }
  }
}
